<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/laypage.css"/>
    <link rel="stylesheet" href="css/layui.css"/>


    <script src="js/vue/vue.min.js"></script>

    <script src="js/jquery/jquery.min.js"></script>

   <script src="js/layer/layer.js"></script>
    <script src="js/laypage/laypage.js"></script>
</head>
<body>
<div id="app" class="container">

    <form class="form-inline bg-danger" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="title">新闻标题</label>
            <input type="text" class="form-control" id="title" placeholder="新闻标题">
        </div>
        <button type="button" id="findNews" class="btn btn-success">查询新闻</button>
        <button type="button" id="addNewsBtn" class="btn btn-danger">增加新闻</button>
    </form>


    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <td>序号</td>
                <td>标题</td>
                <td>时间</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr class="active" v-for="(item,index) in result">
                <td>{{index+1}}</td>
                <td>{{item.title}}</td>
                <td>{{item.contect}}</td>
                <td>

                    <div class="site-demo-button"  style="margin-bottom: 0;">
                    <button  data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">
                        <a href="#" @click="delmsg(item.newId)">删除</a>
                    </button>
                        <button  data-method="offset" data-type="auto" class="layui-btn layui-btn-normal">
                            <a href="#" @click="updatenews(item.newId)">修改</a>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="pagenav"></div>
    </div>
</div>

 <script>
       var app = new Vue({
           el:'#app',
           data:{
               result:[]
           }
       });

      var getNewsList = function (curr) {
          $.ajax({
              url:'/news_searchNews',
              type:'POST',
              data:{
                  pageIndex:curr||1,
                  pageSize:2,
                  'news.title':$('#title').val(),
              },
              dataType:'json',
              success:function (msg) {
                  app.result = msg.result;

                  //分页

                  laypage({
                      cont:'pagenav',
                      pages:msg.totalPages,
                      first:'首页',
                      last:'尾页',
                      curr:curr||1,
                      jump:function (obj,first) {
                          if(!first){
                              getNewsList(obj.curr)
                          }
                      }
                  });
              }
          })
      }

      getNewsList();
     $("#findNews").on('click',function () {
         console.log("88")
         getNewsList();
     })


  function delmsg(id){
         console.log("--"+id)
          layer.confirm('确认删除吗',{
                  btn:['残忍删除','我在想想']
          },
            function(){
              //成功
              $.ajax({
                  url:'/news_delNews',
                  type:'POST',
                  data:{
                      "news.newId":id,
                  },
                  success:function () {
                      getNewsList();
                      //弹出删除成功提示信息 {icon:6} layer的表情信息
                      layer.msg('已经成功删除了id为:'+id+'的记录',{icon:6})
                  }
              })
            }  ,function () {
                  //失败
                  getNewsList();
              }
          )
        };


        $('#addNewsBtn').click(function () {
            layer.open({
                type:2,
                title:'增加新闻',
                fix:false,//是否固定位置
                maxmin:true,//是否可以放大仿效
                shadeClose:true, //是否可以关闭窗口
                area:['1100px','600px'],
                //展示页面内容 可以写标签 可以写界面  可以写请求 action 信息
                content:'addnews.html',
                end:function () {
                    getNewsList();
                }
            })
        })

     function updatenews(id) {
         layer.open({
             type:2,
             fix:false,
             maxmin:true,
             shadeClose:true,
             content:'/news_getNews?news.newId='+id,
             area:['1100px','600px'],
             end:function () {
                 getNewsList();
             }
         })
     }
 </script>



</body>
</html>